<template>

   <div class="schoollist">
    <div id="app">
        <h1>查询学校：</h1>
    <input type="text" placeholder="请输入学校" v-model="kkk">
    <button @click="ons()">查询</button>

    <ul v-if="schoollist.length">
        <li v-for="item in schoollist" :key="item.id">
            {{item.name}}</li>
    </ul>

    <table border="1">
        <tr>
            <th>编号</th>
            <th>学校</th>
            <th>本科</th>
            <th>硕士</th>
            <th>博士</th>
            <th>专任教师</th>
            <th>备注</th>
            
        </tr>
        <tr v-for="item in school" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.UnderGraduate}}</td>
            <td>{{item.Master}}</td>
            <td>{{item.Dr}}</td>
            <td>{{item.Teach}}</td>
            <td>{{item.notes}}</td>
            
        </tr>
        
    </table>
    </div>
</div>
</template>

<script>
export default {
    name : 'SchoolList',
    
    data(){
        return{
            schoollist:[],
            kkk: '',
            school : [
    { id:1 ,name : '北京大学', UnderGraduate : 16628, Master : 16980, Dr : 14979, Teach : 3804, notes : '' },
    { id:2 ,name : '清华大学', UnderGraduate : 16291, Master : 22657, Dr : 21671, Teach : 3860, notes : '' },
    {id:3 , name : '复旦大学', UnderGraduate : 15164, Master : 36690, Dr : 36690, Teach : 3602, notes : '' },
    { id:4 ,name : '上海交通大学', UnderGraduate : 18004, Master : 28439, Dr : 28439, Teach : 3887, notes : '学生数仅含全日制' },
    {id:5 , name : '浙江大学', UnderGraduate : 29014, Master : 28058, Dr : 18436, Teach : 4605, notes : '' },
    { id:6 ,name : '中国科学技术大学', UnderGraduate : 8006, Master : 19792, Dr : 12213, Teach : 2264, notes : '' },
    { id:7 ,name : '南京大学', UnderGraduate : 15448, Master : 19066, Dr : 16269, Teach : 'N/A', notes : '' },
    { id:8 ,name : '哈尔滨工业大学', UnderGraduate : 31181, Master : 16296, Dr : 9224, Teach : 4120, notes : '' },
    { id:9 ,name : '西安交通大学', UnderGraduate : 24051, Master : 22587, Dr : 9337, Teach : 3772, notes : '' },
    {id:10 , name : '中国科学院大学', UnderGraduate : 1662, Master : 32106, Dr : 31262, Teach : 3311, notes : '' },
    { id:11 ,name : '中国人民大学', UnderGraduate : 11678, Master : 11088, Dr : 5154, Teach : 1962, notes : '学生数仅含全日制' },
    {id:12 , name : '同济大学', UnderGraduate : 18272, Master : 18798, Dr : 9566, Teach : 2797, notes : '《2024统计公报》提取' },
    { id:13 ,name : '华东师范大学', UnderGraduate : 115903, Master : 17153, Dr : 4114, Teach : 2358, notes : '学生数仅含全日制' },
    { id:14 ,name : '中山大学', UnderGraduate : 33329, Master : 24138, Dr : 10718, Teach : 4619, notes : '' },
    { id:15 ,name : '华南理工大学', UnderGraduate : 27757, Master : 18476, Dr : 5289, Teach : 2606, notes : '' },
    {id:16 , name : '华中科技大学', UnderGraduate : 29742, Master : 23337, Dr : 11651, Teach : 3727, notes : '' },
    {id:17 , name : '南开大学', UnderGraduate : 17305, Master : 11772, Dr : 5559, Teach : 2291, notes : '学生数仅含全日制' },
    { id:18 ,name : '天津大学', UnderGraduate : 18955, Master : 13707, Dr : 5822, Teach : 'N/A', notes : '学生数仅含全日制' },
    {id:19 , name : '中南大学', UnderGraduate : 35385, Master : 16266, Dr : 8667, Teach : 'N/A', notes : '学生数仅含全日制' },
    {id:20 , name : '湖南大学', UnderGraduate : 22699, Master : 11110, Dr : 5409, Teach : 'N/A', notes : '学生数仅含全日制' },
    {id:21 , name : '东南大学', UnderGraduate : 16931, Master : 23289, Dr : 23289, Teach : 3371, notes : 'N/A' },
    { id:22 ,name : '北京航空航天大学', UnderGraduate : 16522, Master : 23985, Dr : 23985, Teach : 3055, notes : '' },
    {id:23 , name : '北京理工大学', UnderGraduate : 15212, Master : 12920, Dr : 7426, Teach : 2688, notes : '学生数仅含全日制' },
    {id:24 , name : '北京师范大学', UnderGraduate : 16628, Master : 16980, Dr : 14979, Teach : 3804, notes : '' },
  ],
        }
        },
        computed:{
            // schoollist(){
                
            //     // return this.school.filter(item=>
            //     //     item.name.toLowerCase().includes(this.kkk.toLowerCase())
            //     // );
            // }
        },
       methods:{
        ons(){
            console.log('当前：',this.kkk);
            
        }
       }
            
        
}
</script>

<style scoped>
.SchoolList{
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 5rem;
  text-align: center;
}
</style>